import { observer } from "mobx-react";
import { WeaSelect, WeaInputSearch, WeaDialog, WeaZmage,WeaLocaleProvider,WeaTools } from 'ecCom';
import { Button,message } from 'antd';
import { WeaTableNew } from 'comsMobx';
import classnames from 'classnames';
const getLabel = WeaLocaleProvider.getLabel;

import './templateBrowser.less';
const WeaTable = WeaTableNew.WeaTable;
@observer
export default class TemplateBrowser extends React.Component {
    render() {
        const { store, onChange,exportExcel } = this.props;
        store.setTitle(getLabel('503349', '选择路径'));
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@w04oj3`}
                visible={store.visible}
                style={{ width: store.width, height: 554 }}
                title={store.title}
                icon="icon-coms02-Data-center"
                iconBgcolor="#1a57a0"
                onCancel={store.hide}
                className="edc-template-browser-dialog"
                placement="left"
                hasScroll={false}
            >
                <TemplateBrowserContent ecId={`${this && this.props && this.props.ecId || ''}_TemplateBrowserContent@zw8v4k`} store={store} onChange={onChange} exportExcel={exportExcel} />
            </WeaDialog>
        )
    }
}

@observer
export class TemplateBrowserContent extends React.Component {
    render() {
        const { store } = this.props;
        const { tableStore } = store;
        window.tableStore = tableStore;
        return (
            <div className={classnames('edc-template-browser')}>
                <div className="left">
                    <div className="search-wrapper">
                         <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@g6hvza`}
                            options={store.condition}
                            value = {store.selectValue}
                            onChange = {(v) => store.changeselectValue(v)}
                        />
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@ow4lua`}
                            value = {store.searchText}
                            onSearch={(v) => store.onSearch(v)}
                        />
                    </div>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@nooot6`}
                        comsWeaTableStore={tableStore}
                        needScroll={true}
                        hasOrder={true}
                        register_table={store.reloadTable}
                        uniqueId={true}
                        onRowClick={this.previewTemplate}
                        rowClassName={record => store.current && record.randomFieldId == store.current.id ? 'selected' : ''}
                        paginationProps={{
                            pageSize: 10,
                            weaSimple: true,
                            showTotal: total => `${getLabel('18609','共')+total+getLabel('18256','条')}`
                        }}
                    />
                </div>
                {store.current && <div className="right">
                    <h2>{store.current.name}</h2>
                    <div className="desc"><span dangerouslySetInnerHTML={{ __html: store.current.creatorName }} />&nbsp;{store.current.createDate}</div>
                    <div className="image">
                        {store.current.img ? <WeaZmage ecId={`${this && this.props && this.props.ecId || ''}_WeaZmage@hd9c25`} src={store.current.img} style={{ width: '100%', height: 'autp' }} />
                            : <div className="no-excel-icon">
                                <i className={store.type === 'excel' ? "icon-mode-microsoftexcel" : "icon-coms-pic"}></i>
                                <div className="f14">{getLabel('502740','暂无预览图片')}</div>
                            </div>
                        }
                    </div>
                </div>}
                <div className="btns">
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hziz1q`} type="primary" onClick={this.openFile} disabled={!store.current}>{getLabel('826', '确定')}</Button>
                    {store.type === 'excel' && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jefft6`} onClick={this.downloadPic} disabled={!store.current} >{getLabel('31156','下载')}Excel</Button>}
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qp6yqv`} onClick={store.hide}>{getLabel(31129,'取消')}</Button>
                </div>
            </div>
        )
    }
    openFile = () => {
        const { store } = this.props;
        this.props.onChange(store.current);
        store.hide();
    }

    downloadPic = () => {
        const { store } = this.props;
        if(store.current.json){
            this.props.exportExcel(store.current.name.replace('.xlsx', ''),store.current.json);
        } else {
            message.error(getLabel('511883','模板为空'));
        }
    }
    rowClassName = (record) => {
        const { store } = this.props;
        if (store.current && record.name === store.current.name) {
            return 'selected';
        }
        return '';
    }
    previewTemplate = (record, e) => {
        const { store } = this.props;
        store.showView(record);
    }

}